<template>
    <div>
        <br />
        <el-card>
            <div class="page-common-top-filter">
                <div class="left">
                    <div class="page-common-filter-item">
                        <el-input v-model="filterSkcId" class="page-common-filter-content" placeholder="商品ID" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input v-model="filterSkcName" class="page-common-filter-content" placeholder="商品名称" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input v-model="filterSkuId" class="page-common-filter-content" placeholder="skuID" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-input v-model="filterCommentsQuery" class="page-common-filter-content" placeholder="备注搜索" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-select v-model="filterOperationType" placeholder="操作类型" class="page-common-filter-content">
                            <el-option label="覆盖库存" value="0" />
                            <el-option label="出库" value="1" />
                            <el-option label="入库" value="2" />
                            <el-option label="删除品类" value="3" />
                            <el-option label="增加品类" value="4" />
                            <el-option label="修改品类" value="5" />
                        </el-select>
                    </div>
                    <div class="page-common-filter-item">
                        <el-date-picker v-model="filterOperationTimeRange" type="datetimerange" range-separator="至"
                            start-placeholder="操作开始日期" end-placeholder="操作结束日期" />
                    </div>
                    <div class="page-common-filter-item">
                        <el-select v-model="filterInventoryAddressId" placeholder="仓库" class="page-common-filter-content">
                            <el-option v-for="item of storeList" :label="item.addressName" :value="item.addressId"
                                :key="item.addressId" />
                        </el-select>
                    </div>
                </div>
                <div class="page-common-top-right-btn">
                    <el-button type="primary" @click="onSearch">搜索</el-button>
                    <el-button @click="onReset">重置</el-button>
                </div>
            </div>
        </el-card>
        <br />
        <el-card>
            <div class="page-common-top-filter">
                <!-- <el-button type="primary">导出</el-button> -->
                <span style="display: flex;align-items: center;margin: 0 10px;">库存合计：{{ inventoryInputItemNum }}</span>
                <span style="display: flex;align-items: center;margin: 0 10px;">出库合计：{{ inventoryOutputItemNum }}</span>
                <span style="display: flex;align-items: center;margin: 0 10px;">覆盖库存合计：{{ inventorySetItemNum }}</span>

            </div>
            <br />
            <el-table :data="tableData" style="width: 100%" class="table" :row-style="tableRowStyle">
                <el-table-column prop="tempSort" label="序号" />
                <el-table-column prop="skcId" label="商品ID" />
                <el-table-column prop="skcName" label="商品名称" />
                <el-table-column label="商品图片">
                    <template v-slot="{ row }">
                        <img class="table-img" :src="row.skcImageUrl" />
                    </template>
                </el-table-column>
                <el-table-column prop="operTypeStr" label="操作类型" />
                <el-table-column prop="skuName" label="SKU名称" />
                <el-table-column prop="tempStoreName" label="仓库" />
                <el-table-column prop="beforeOperationInventoryNum" label="操作前库存教" />
                <el-table-column prop="afterOperationInventoryNum" label="操作后库存数" />
                <el-table-column prop="operationTime" label="操作时间" width="110" />
                <el-table-column prop="comments" label="备注" />
            </el-table>
            <br />
            <Pagination :total="dataTotal" :page="current" :limig="pageSize" @pagination="onPageChange" />
        </el-card>
    </div>
</template>



<script setup>
import { onMounted, ref } from 'vue'
import { getInventoryDetailApi, getAddressApi } from "@/api/pdd"
import moment from "moment"
const obj = {
    0: '覆盖库存',
    1: '出库',
    2: '入库',
    3: '删除品类',
    4: '增加品类',
    5: '修改品类'
}

const tableData = ref([])
const current = ref(1)
const pageSize = ref(20)
const inventoryInputItemNum = ref(0)
const inventoryOutputItemNum = ref(0)
const inventorySetItemNum = ref(0)
const dataTotal = ref(0)
const storeList = ref([])

// 筛选参数
const filterSkcId = ref('')
const filterSkcName = ref('')
const filterSkuId = ref('')
const filterOperationType = ref('')
const filterCommentsQuery = ref('')
const filterOperationTimeRange = ref([])
const filterInventoryAddressId = ref('')

function tableRowStyle({ row, rowIndex }) {
    // return 'background:red;'
}

// 获取仓库地址列表
async function getStoreList() {
    const result = await getAddressApi();
    if (result.status === 0) {
        storeList.value = result.addressList;
    }
}

// 获取列表数据
async function getDataList() {
    const result = await getInventoryDetailApi({
        pageId: current.value,
        pageSize: pageSize.value,
        filter: {
            ...getSearchParam()
        }
    });
    if (result.status === 0) {
        inventoryInputItemNum.value = result.inventoryInputItemNum
        inventoryOutputItemNum.value = result.inventoryOutputItemNum
        inventorySetItemNum.value = result.inventorySetItemNum
        tableData.value = result.inventoryItemOperationHistoryInfoList.map((item, index) => {
            item.operTypeStr = obj[item.operationType]
            item.tempSort = (index + 1)
            storeList.value.forEach(store => {
                if (+store.addressId === +item.addressId) {
                    item.tempStoreName = store.addressName
                }
            })
            return item;
        });
        dataTotal.value = result.inventoryItemOperationHistoryTotalNum
    }
}

// 获取筛选参数
function getSearchParam() {
    const temp = {}
    if (filterSkcId.value.trim()) {
        temp.skcId = filterSkcId.value
    }
    if (filterSkcName.value.trim()) {
        temp.skcName = filterSkcName.value
    }
    if (filterSkuId.value.trim()) {
        temp.skuId = filterSkuId.value
    }
    if (filterOperationType.value.trim()) {
        temp.operationType = +filterOperationType.value
    }
    if (filterCommentsQuery.value.trim()) {
        temp.commentsQuery = filterCommentsQuery.value
    }
    if (filterOperationTimeRange.value.length > 0) {
        temp.operationTimeRange = { start_time: moment(filterOperationTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss'), end_time: moment(filterOperationTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss') }
    }
    if (filterInventoryAddressId.value || filterInventoryAddressId.value === 0) {
        temp.inventoryAddressId = filterInventoryAddressId.value
    }
    return temp
}

function onPageChange({ page, limit }) {
    current.value = page || 1;
    pageSize.value = limit || 20;
    getDataList()
}

function onSearch() {
    getDataList()
}

function onReset() {
    filterSkcId.value = ''
    filterSkcName.value = ''
    filterSkuId.value = ''
    filterOperationType.value = ''
    filterCommentsQuery.value = ''
    filterOperationTimeRange.value = []
    filterInventoryAddressId.value = ''
    getDataList()
}

onMounted(() => {
    getStoreList()
    getDataList();
})

</script>

<style lang="scss" scoped>
.table-img {
    width: 60px;
    height: 60px;
}
</style>